<script setup lang="ts">
import { inject, computed } from 'vue'
import { dropdownSymbol } from './dropdownContext'

const dropdownContext = inject(dropdownSymbol)

const menuStyle = computed(() => ({
  top: `${dropdownContext?.top.value}px`,
  left: `${dropdownContext?.left.value}px`,
}))

</script>

<template>
  <Transition name="kx-dropdown-fade">
    <div v-show="dropdownContext?.visible.value" :style="menuStyle" class="kx-dropdown-menu fixed z-30 bg-[var(--primary-black-color)]
      shadow-[0_4px_16px_0_rgba(210,255,96,0.08)] px-2 py-2.5 rounded-[4px]">
      <slot></slot>
    </div>
  </Transition>
</template>


<style lang="scss">
$transition-duration: 200ms;

.kx-dropdown-fade-enter-active {
  animation: menu-fade-in $transition-duration;
  transform-origin: top;
}

.kx-dropdown-fade-leave-active {
  animation: menu-fade-out $transition-duration;
  transform-origin: top;
}

@keyframes menu-fade-in {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes menu-fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}
</style>